<template>
  <!--规则剔除-->
  <section class="page role-manage">
    <data-form :model="roleModel" @onSearch="refreshData" :page="pageService">
      <template slot="inputs">
        <el-form-item label="策略名称" prop="strategyName">
          <el-input v-model.trim="roleModel.strategyName"></el-input>
        </el-form-item>
        <el-form-item label="策略代码" prop="strategyNo">
          <el-input v-model.trim="roleModel.strategyNo"></el-input>
        </el-form-item>
        <el-form-item label="剔除渠道" prop="channelTypeList">
          <el-select v-model="roleModel.channelTypeList" collapse-tags multiple placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('ChannelType')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="策略状态" prop="state">
          <el-select v-model="roleModel.state" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData(
                'CommonState'
              )" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修改人" prop="updateName">
          <el-input v-model.trim="roleModel.updateName"></el-input>
        </el-form-item>
        <el-form-item label="复核人" prop="applyName">
          <el-input v-model.trim="roleModel.applyName"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="roleDataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="buttons">
        <el-button @click="roleObj = { },operationType.DEFAULT='OPERATION_ADD', dialog.modify = true" v-auth="23310">新增剔除策略</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column label="操作" :min-width="$helper.getOperateWidth(2)">
          <template slot-scope="scope">
            <el-button type="text" @click="
                roleObj = { ...scope.row },operationType.DEFAULT='OPERATION_SEE', dialog.modify = true
              ">查看</el-button>
            <!-- <el-button type="text" @click="stop(scope.row)" v-if="scope.row.state === 'ALREADY_STOP' ? false : true" :disabled="scope.row.state === 'PENDING' ? true : false">停用</el-button>
            <el-button type="text" @click="stop(scope.row)" v-else>启用</el-button> -->
            <el-button type="text" @click="
                roleObj = {...scope.row },operationType.DEFAULT='OPERATION_EDIT', dialog.modify = true
              " :disabled="scope.row.applyStatus === 'PENDING' ? true : false" v-auth="23311">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="strategyNo" label="策略代码" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="strategyName" label="策略名称" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="strategyPriority" label="优先级" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="state" label="策略状态" :formatter="
            row => $filter.dictConvert(row.state, 'CommonState')
          " :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="剔除渠道" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="border" v-for="(item, i) in scope.row.channel" :key="i">
              {{ $filter.dictConvert(item.channel, "ChannelType") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="channelJson.expiryDate" label="有效期" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="border" v-for="(item, i) in scope.row.channel" :key="i">
              {{ $filter.dateFormat(item.expiryDate) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateName" label="修改人" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" :formatter="row => $filter.dateTimeFormat(row.updateTime)" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="applyName" label="复核人" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="applyTime" label="复核时间" :formatter="row => $filter.dateTimeFormat(row.applyTime)" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="remark" label="注记" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="审批记录" :min-width="$helper.getOperateWidth(1)">
          <template slot-scope="scope">
            <el-button type="text" @click="
                (roleObj = { type: 'RuleApproval', ...scope.row }),
                  (dialog.ruleLog = true)
              ">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="剔除日志" :min-width="$helper.getOperateWidth(1)">
          <template slot-scope="scope">
            <el-button type="text" @click="
                (roleObj = { type: 'RuleRm', ...scope.row }),
                  (dialog.seeLog = true)
              ">查看</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!--新增/修改剔除策略弹出框-->
    <el-dialog :title="
        operationType.DEFAULT==='OPERATION_ADD' ? '新增剔除策略' : operationType.DEFAULT==='OPERATION_EDIT' ? '编辑剔除策略' : '剔除策略详情'
      " :close-on-click-modal="false" :center="true" :visible.sync="dialog.modify" width="900px" @open="$nextTick(() => $refs['add-rule'].reset())">
      <add-rule :roleData="roleObj" @close="dialog.modify = false" @refreshList="refreshData" ref="add-rule"></add-rule>
    </el-dialog>

    <el-dialog title="剔除策略日志" @close="dialog.seeLog = false" :visible.sync="dialog.seeLog" :show-close="true" append-to-body :close-on-click-modal="false" :close-on-press-escape="true" width="700px" @open="$nextTick(() => $refs['list-log'].refreshData())">
      <list-log :modifyData="roleObj" @refreshList="refreshData" ref="list-log" eliminateType="RULE_ELIMINATE"></list-log>
    </el-dialog>

    <el-dialog title="审批记录" @close="dialog.ruleLog = false" :visible.sync="dialog.ruleLog" append-to-body :show-close="true" :close-on-click-modal="false" :close-on-press-escape="true" width="800px" @open="$nextTick(() => $refs['see-log'].refreshData())">
      <see-log ref="see-log" :modifyData="roleObj" @refreshData="refreshData"></see-log>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { RuleRemovedService } from "~/services/domain-service/rule-removed.service";
import { PageService } from "~/utils/page.service";
import ListLog from "~/components/strategic-manage/list-log.vue";
import AddRule from "~/components/strategic-manage/add-rule.vue";
import SeeLog from "~/components/strategic-manage/see-log.vue";
import { OPERATION_TYPE } from "~/config/enum.config";
import { namespace } from "vuex-class";

const systemModule = namespace("system-manage");

@Auth(2331)
@Layout("workspace")
@Component({
  components: {
    AddRule,
    SeeLog,
    ListLog,
  }
})
export default class RuleRemoved extends Vue {
  @Dependencies(RuleRemovedService)
  private ruleRemovedService: RuleRemovedService;
  @Dependencies(PageService)
  private pageService: PageService;
  @systemModule.Action private updateResource: () => void;

  private roleModel: any = {
    strategyName: '',
    strategyNo: '',
    channelTypeList: [],
    state: '',
    updateName: '',
    applyName: '',
  };
  // 页面按钮类型
  private operationType: any = OPERATION_TYPE
  private hidden: boolean = true;
  private modifyData: any = {};
  private roleDataSet: any[] = [];
  private roleObj: any = {};
  private dialog: any = {
    modify: false,
    module: false,
    list: false,
    seeLog: false,
    ruleLog: false
  };

  /**
   * 获取规则剔除策略列表
   */
  public refreshData () {
    this.ruleRemovedService
      .queryAllRule(this.roleModel, this.pageService)
      .subscribe(data => {
        data.map(v => {
          v.channel = JSON.parse(v.channelJson);
          const arr = JSON.parse(v.formulaJson)
          arr.map(f => {
            if (f.value.indexOf(',') !== -1) {
              const strArr = f.value.split(",")
              f.value = strArr.map(Number)
            }
            return f.value
          })
          v.formulaJson = JSON.stringify(arr)
        });
        this.$forceUpdate();
        this.roleDataSet = data;
      });
  }

  /**
   * 停用/启用
   */
  private stop (row) {
    this.ruleRemovedService.stopOrStartRule({ id: row.id }).subscribe(data => {
      this.refreshData();
    });
  }
  private mounted () {
    this.refreshData();
    this.updateResource();
  }
}
</script>

<style lang="less" scoped>
.border {
  border-bottom: 1px solid #ebeef5;
}
div:last-child {
  border-bottom: none;
}
</style>